<template>
  <div class="device">
    <div class="element">
      <div class="left">设备名称</div>
      <el-input v-model.trim="formModel.deviceName" class="right"></el-input>
    </div>
    <div class="element">
      <div class="left">
        控制接口
      </div>
      <el-select v-model="formModel.deviceValue" class="right" @change="change">
        <el-option v-for="(item) in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div v-if="treeData && treeData.length" class="element dymicForm">
      <div class="left">
        连接参数
      </div>
      <NodeTree ref="nodeTree" class="right" :data="treeData" />
    </div>
    <div v-else class="element dymicForm">
      <div class="empty-text">
        暂无连接参数
      </div>
    </div>
    <div class="element">
      <el-button type="primary" @click="createDevice">确定</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { sendCommand } from "../../api/manualTest/index";

import { nodeItem, NodeTree } from "../../common/index.js";
import "../../common/style.css";

const emit = defineEmits(['closeDeviceDialog']);

onMounted(async () => {
  options.value = [];
  getManagers();
})

// 定义表单模型
const formModel = reactive({
  deviceName: "",
  deviceValue: "",
});

// 定义选项和树数据
const options = ref<any[]>([]);
const treeData = ref<nodeItem[]>([]);

// 获取管理器列表
const getManagers = async () => {

  const testResult = await sendCommand({}, { commandName: "GetManagers" });
  const { data }: { data: any[] } = testResult; // Explicitly type data as an array
  if (data && data.length) {
    options.value = data.map((item: any) => ({
      value: item,
      label: item,
    }));
    if (options.value.length) {
      formModel.deviceValue = options.value[0].value;
      getConnectFormByManagerName();
    }
  }
};

// 获取连接参数
const getConnectFormByManagerName = async () => {
  treeData.value = []; // Reset tree data before fetching new data

  const testResult = await sendCommand({ managerName: formModel.deviceValue }, { commandName: "GetCreateFormByManagerName" });

  const { data }: { data: any[] } = testResult;

  if (data && data.length) {
    treeData.value = data;
  }

  console.log("testResult", JSON.stringify(testResult));

};

// 创建设备
const createDevice = async () => {
  if (!formModel.deviceName) {
    ElMessage.error("设备名称不能为空");
    return;
  }

  console.log("treeData", treeData);

  const testResult = await sendCommand({
    managerName: formModel.deviceValue,
    deviceName: formModel.deviceName,
    createParams: JSON.stringify(treeData.value)
  }, { commandName: "CreateDevice" },
  );

  const { data } = testResult;
  if (data) {
    ElMessage.success("设备添加成功");
    emit("closeDeviceDialog");
  } else {
    ElMessage.error("设备添加失败，请检查参数");
  }
};

// 处理选择变化
const change = () => {
  getConnectFormByManagerName();
};

</script>
<style lang="scss" scoped>
.device {
  .element {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    .left {
      width: 80px;
      color: #666666;
    }

    .right {
      flex: 1;
    }

    :deep(.el-button--primary) {
      width: 150px;
    }

  }

  .element:nth-child(1) {
    margin-top: 0;
  }

  .element:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .dymicForm {
    height: 200px;
  }
}
</style>
